import React, { Component, Fragment } from 'react';
import Add from '../Add';
import AddForm from '../Form';
import DeletePopup from '../DeletePopup';

import styles from './index.module.less';

export default class ReturnAddress extends Component {
  state = {
    shipmentList: [
      { key: 1, name: '李清照', area: '浙江省杭州市拱墅区', address: '余杭塘路488号', postcode: '123456', phone: '0513-12345678-123', mobile: '17112341234' },
      { key: 2, name: '赵明诚', area: '浙江省杭州市拱墅区', address: '余杭塘路488号', postcode: '123456', phone: '0513-12345678-222', mobile: '88888888888' },
      { key: 3, name: '赵明诚', area: '浙江省杭州市拱墅区', address: '余杭塘路488号', postcode: '123456', phone: '0513-12345678-222', mobile: '88888888888' },
    ],
    visible: false,
    deleteVisible: false,
    deletePopup: false,
  };
  handleUpdate = () => {
    this.setState({ visible: true });
  };
  handleCancel = () => {
    this.setState({ visible: false });
  };
  handleCreate = () => {
    const form = this.formRef.props.form;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      console.log('Received values of form: ', values);
      form.resetFields();
      this.setState({ visible: false });
    });
  };
  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  handleDelete=() => {
    this.setState({ deleteVisible: true });
  }
  deleteOnCancel= () => {
    this.setState({ deleteVisible: false });
  };
  deleteOnCreate=() => {
    this.setState({ deleteVisible: false });
  }

  render() {
    const { shipmentList, visible, showPopup, deletePopup } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.title + ' ' + styles.pullLeft}>发货地址管理</div>
        <div className={styles.addBtn + ' ' + styles.pullRight}>
          <Add addName='新增发货地址' addTitleName='新增发货地址'/>
        </div>
        <table>
          <thead>
            <tr>
              <th>联系人</th>
              <th>所在地区</th>
              <th>街道地址 </th>
              <th>邮编</th>
              <th>电话、手机号码 </th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {
              shipmentList.map((item, index) => {
                return (
                  <tr key={item.key}>
                    <td>{item.name}</td>
                    <td>{item.area}</td>
                    <td>{item.address}</td>
                    <td>{item.postcode}</td>
                    <td>{item.phone}   {item.mobile}</td>
                    <td>
                      <span style={{ color: '#ff0000', marginRight: '10px', cursor: 'pointer' }} onClick={this.handleUpdate}>修改</span>
                      <span style={{ color: '#1e88e5', cursor: 'pointer' }} onClick={this.handleDelete} >删除</span>
                    </td>
                  </tr>
                );
              })
            }
          </tbody>
        </table>
        <div style={{ display: showPopup ? 'block' : 'none' }}>
          <AddForm
            wrappedComponentRef={this.saveFormRef}
            visible={this.state.visible}
            onCancel={this.handleCancel}
            onCreate={this.handleCreate}
            titleName='修改发货地址'
          />
        </div>
        <div style={{ display: deletePopup ? 'block' : 'none' }}>
          <DeletePopup
            deleteVisible={this.state.deleteVisible}
            deleteOnCancel={this.deleteOnCancel}
            deleteOnCreate={this.deleteOnCreate}
            deleteonCancel={this.deleteOnCancel}
            deletetitleName='删除提示'
            addressTitle='发货'
          />
        </div>
      </div>
    );
  }
}
